<template>
  <div class="home">
    <div class="mainBox">
      <div class="mainBox-left">
        <div class="archivesHead">
          <h1 style="color: red; font-size: 18px; margin-top: 5px">archives</h1>
          <p style="margin-top: 5px">
            <span>total</span>
            <span style="color: red">
              {{
                archivesArr1.length + archivesArr2.length + archivesArr3.length
              }}
            </span>
            <span>piece</span>
          </p>
        </div>
        <div class="archivesBox">
          <h2 style="margin-left: 5px">2023</h2>
          <h3 style="color: #aaa; margin-left: 20px; font-size: 17px">
            January
          </h3>
          <ul v-for="(item, index) in archivesArr1" :key="index">
            <li @click="golistDet(item.id)">
              <span style="font-size: 14px">12-28</span>
              <b
                style="
                  font-size: 18px;
                  margin-left: 10px;
                  color: var(--titleHcolor);
                "
              >
                {{ item.title }}
              </b>
            </li>
          </ul>
        </div>
        <div class="archivesBox">
          <h2 style="margin-left: 10px">2022</h2>
          <h3 style="color: #aaa; margin-left: 20px; font-size: 17px">
            December
          </h3>
          <ul v-for="(item, index) in archivesArr2" :key="index">
            <li @click="golistDet(item.id)">
              <span style="font-size: 14px">01-09</span>
              <b
                style="
                  font-size: 18px;
                  margin-left: 10px;
                  color: var(--titleHcolor);
                "
                >{{ item.title }}</b
              >
            </li>
          </ul>
        </div>
        <div class="archivesBox">
          <h3 style="color: #aaa; margin-left: 20px; font-size: 17px">
            November
          </h3>
          <ul v-for="(item, index) in archivesArr3" :key="index">
            <li @click="golistDet(item.id)">
              <span style="font-size: 14px">01-09</span>
              <b
                style="
                  font-size: 18px;
                  margin-left: 10px;
                  color: var(--titleHcolor);
                "
                >{{ item.title }}</b
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="mainBox-right">
        <div class="rightBox1">
          <div class="tagTitle">
            <b style="margin-left: 20px">recommendToReading</b>
          </div>
          <div class="rightBox-Remmoend">
            <reommend />
          </div>
        </div>
        <div class="rightBox2">
          <div class="rightBox-tagTitle">
            <b style="margin-left: 20px">categoryTitle</b>
          </div>
          <categoryTitle />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { archivesMain } from "../../api/index";
import reommend from "../../components/Reommend.vue";
import categoryTitle from "../../components/categoryTitle.vue";
export default {
  data() {
    return {
      archivesArr1: [],
      archivesArr2: [],
      archivesArr3: [],
    };
  },
  components: {
    reommend,
    categoryTitle,
  },
  mounted() {
    this.getArchives();
  },
  methods: {
    async getArchives() {
      const { data } = await archivesMain();
      this.archivesArr1 = data.data[2023].January;
      this.archivesArr2 = data.data[2022].December;
      this.archivesArr3 = data.data[2022].November;
      console.log(data.data[2023].January);
      console.log(data.data[2022].December);
      console.log(data.data[2022].November);
    },
    golistDet(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.home {
  width: 100%;
  height: 200vh;
  .mainBox {
    width: 1000px;
    height: 150vh;
    margin: 0 auto;
    margin-top: 20px;
    .mainBox-left {
      float: left;
      width: 650px;
      background: var(--contentBackground);
      .archivesHead {
        width: 100%;
        height: 60px;
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
      .archivesBox {
        width: 100%;
        h2 {
          margin: 5px 0 5px 5px;
          color: var(--titleHcolor);
        }
        ul li {
          line-height: 60px;
          padding-left: 10px;
          list-style-type: disc;
          color: var(--titleHcolor);
          margin-left: 40px;
        }
        ul li:hover {
          color: red;
        }
      }
    }
    .mainBox-right {
      float: right;
      width: 330px;
      height: 100%;
      position: fixed;
      top: 80px;
      right: 260px;
    }
  }
}
</style>
